<template>
    <div class="xdfeizhi-form">
        <div class="page-header">
            <router-link to="/main/renshi/zhaoping/zhaopingxiudin" class="back-link">
                <i class="el-icon-arrow-left" />返回
            </router-link>
            <div class="page-title">
                <h2>文件修订/废止申请单</h2>
                <p class="form-info">表单编号及版本：AM-FR-0008 A/0 生效日期：2024年11月1日 保存年限:长期</p>
            </div>
        </div>

        <div class="form-container">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="main-form">
                <div class="form-header">
                    <h1>深圳市
                        <el-form-item prop="companyName" style="display: inline-block; margin: 0;">
                            <el-input v-model="form.companyName" :disabled="isView" class="company-name-input" />
                        </el-form-item>
                        有限公司
                    </h1>
                </div>

                <div class="form-section">
                    <table class="form-table">
                        <tr>
                            <td class="label-cell">申请部门：</td>
                            <td>
                                <el-form-item prop="applicationDepartment">
                                    <el-input v-model="form.applicationDepartment" :disabled="isView" />
                                </el-form-item>
                            </td>
                            <td class="label-cell">申请日期:</td>
                            <td>
                                <el-form-item prop="applicationDate">
                                    <el-date-picker
                                        v-model="form.applicationDate"
                                        type="date"
                                        placeholder="选择日期"
                                        style="width: 100%;"
                                        :disabled="isView"
                                        value-format="yyyy-MM-dd"
                                        :picker-options="pickerOptions"
                                        :clearable="false"
                                    />
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">文件名称</td>
                            <td>
                                <el-form-item prop="fileName">
                                    <el-input v-model="form.fileName" :disabled="isView" />
                                </el-form-item>
                            </td>
                            <td class="label-cell">文件编号</td>
                            <td>
                                <el-form-item prop="fileNumber">
                                    <el-input v-model="form.fileNumber" :disabled="isView" />
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">版本</td>
                            <td>
                                <el-form-item prop="version">
                                    <el-input v-model="form.version" :disabled="isView" />
                                </el-form-item>
                            </td>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>

                <div class="form-section">
                    <table class="form-table">
                        <tr>
                            <td class="label-cell">申请原因</td>
                            <td colspan="3">
                                <el-form-item prop="applicationReason">
                                    <el-input type="textarea" v-model="form.applicationReason" :rows="3" :disabled="isView" />
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="form-section revision-section">
                    <div class="section-header">
                        <h3>修订内容</h3>
                        <el-button v-if="!isView" type="primary" size="small" icon="el-icon-plus" @click="addRevision">
                            新增修订记录
                        </el-button>
                    </div>
                    <table class="form-table revision-table">
                        <thead>
                            <tr>
                                <th width="10">序号</th>
                                <th>原文件内容</th>
                                <th>修订内容</th>
                                <th v-if="!isView" width="10">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(revision, index) in form.revisions" :key="index">
                                <td class="center">{{ index + 1 }}</td>
                                <td>
                                    <el-form-item :prop="'revisions.' + index + '.originalContent'">
                                        <el-input type="textarea" v-model="revision.originalContent" :rows="4" :disabled="isView" />
                                    </el-form-item>
                                </td>
                                <td>
                                    <el-form-item :prop="'revisions.' + index + '.revisedContent'">
                                        <el-input type="textarea" v-model="revision.revisedContent" :rows="4" :disabled="isView" />
                                    </el-form-item>
                                </td>
                                <td v-if="!isView" class="center">
                                    <el-button type="danger" circle icon="el-icon-delete" size="mini" @click="removeRevision(index)" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="form-section">
                    <table class="form-table">
                        <tr>
                            <td class="label-cell">批准</td>
                            <td>
                                <el-form-item prop="approver">
                                    <el-input v-model="form.approver" :disabled="isView" />
                                </el-form-item>
                            </td>
                            <td class="label-cell">会原文件责任部门意见</td>
                            <td>
                                <el-form-item prop="departmentOpinion">
                                    <el-input type="textarea" v-model="form.departmentOpinion" :rows="2" :disabled="isView" />
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="label-cell">审核</td>
                            <td>
                                <el-form-item prop="reviewer">
                                    <el-input v-model="form.reviewer" :disabled="isView" />
                                </el-form-item>
                            </td>
                            <td class="label-cell">申请人</td>
                            <td>
                                <el-form-item prop="applicant">
                                    <el-input v-model="form.applicant" :disabled="isView" />
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </div>

                <div class="form-actions">
                    <el-button v-if="!isView" type="primary" size="medium" icon="el-icon-check" @click="handleSubmit">
                        保存
                    </el-button>
                    <el-button size="medium" icon="el-icon-back" @click="$router.push('/main/biao/xdfeizhiList')">
                        返回列表
                    </el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { saveXdfeizhi, updateXdfeizhi, getXdfeizhiById } from '@/api/xdfeizhi'

export default {
    name: 'Xdfeizhi',
    data() {
        return {
            mode: 'create',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        picker.$emit('pick', new Date())
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date()
                        date.setTime(date.getTime() - 3600 * 1000 * 24)
                        picker.$emit('pick', date)
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                        const date = new Date()
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', date)
                    }
                }]
            },
            form: {
                id: null,
                companyName: '艾美思普科技',
                applicationDepartment: '行政管理部',
                applicationDate: new Date().toISOString().split('T')[0],
                fileName: '',
                fileNumber: '',
                version: '',
                applicationReason: '',
                approver: '',
                departmentOpinion: '',
                reviewer: '',
                applicant: '',
                revisions: [{}]
            },
            rules: {
                companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                applicationDepartment: [{ required: true, message: '请输入申请部门', trigger: 'blur' }],
                applicationDate: [{ required: true, message: '请选择申请日期', trigger: 'change' }],
                fileName: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
                fileNumber: [{ required: true, message: '请输入文件编号', trigger: 'blur' }],
                version: [{ required: true, message: '请输入版本', trigger: 'blur' }],
                applicationReason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
                'revisions.*.originalContent': [{ required: true, message: '请输入原文件内容', trigger: 'blur' }],
                'revisions.*.revisedContent': [{ required: true, message: '请输入修订内容', trigger: 'blur' }]
            }
        }
    },
    computed: {
        isView() {
            return this.mode === 'view'
        }
    },
    created() {
        this.mode = this.$route.query.mode || 'create'
        const id = this.$route.query.id
        if (id) {
            this.loadData(id)
        }
    },
    methods: {
        async loadData(id) {
            try {
                const res = await getXdfeizhiById(id)
                if (res.data) {
                    this.form = res.data
                    if (!this.form.revisions || this.form.revisions.length === 0) {
                        this.form.revisions = [{}]
                    }
                }
            } catch (error) {
                this.$message.error('加载数据失败')
            }
        },
        addRevision() {
            if (!this.isView) {
                this.form.revisions.push({
                    originalContent: '',
                    revisedContent: ''
                })
            }
        },
        removeRevision(index) {
            if (!this.isView) {
                this.form.revisions.splice(index, 1)
            }
        },
        async handleSubmit() {
            if (this.isView) return
            
            try {
                await this.$refs.form.validate()
                if (this.mode === 'edit') {
                    await updateXdfeizhi(this.form.id, this.form)
                } else {
                    await saveXdfeizhi(this.form)
                }
                this.$message({
                    type: 'success',
                    message: '保存成功!'
                })
                this.$router.push('/main/biao/xdfeizhiList')
            } catch (error) {
                if (error.message) {
                    this.$message.error(error.message)
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.xdfeizhi-form {
    min-height: 100vh;
    // background-color: #f5f7fa;
    padding: 24px;

    .page-header {
        display: flex;
        align-items: flex-start;
        margin-bottom: 24px;
        position: relative;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

        .back-link {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #409EFF;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-size: 14px;
            transition: all 0.3s ease;

            i {
                margin-right: 5px;
            }

            &:hover {
                color: #66b1ff;
                transform: translateY(-50%) translateX(-3px);
            }
        }

        .page-title {
            flex: 1;
            text-align: center;

            h2 {
                margin: 0;
                color: #303133;
                font-size: 24px;
                font-weight: 500;
            }

            .form-info {
                margin: 10px 0 0;
                color: #909399;
                font-size: 14px;
            }
        }
    }

    .form-container {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        padding: 32px;
        max-width: 1200px;
        margin: 0 auto;

        .main-form {
            max-width: 1000px;
            margin: 0 auto;
        }
    }

    .form-header {
        text-align: center;
        margin-bottom: 36px;
        padding-bottom: 24px;
        border-bottom: 1px solid #EBEEF5;

        h1 {
            font-size: 24px;
            color: #303133;
            margin: 0;
            font-weight: 500;
        }

        .company-name-input {
            width: 200px;
            margin: 0 10px;

            :deep(.el-input__inner) {
                text-align: center;
                font-size: 24px;
                color: #303133;
                font-weight: 500;
            }
        }
    }

    .form-section {
        margin-bottom: 36px;
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #EBEEF5;

            h3 {
                margin: 0;
                font-size: 18px;
                color: #303133;
                font-weight: 500;
            }
        }
    }

    .form-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #EBEEF5;
        border-radius: 4px;
        overflow: hidden;

        td, th {
            padding: 16px;
            border: 1px solid #EBEEF5;
            transition: background-color 0.3s;
        }

        th {
            background-color: #F5F7FA;
            color: #606266;
            font-weight: 500;
            text-align: left;
        }

        .label-cell {
            background-color: #F5F7FA;
            color: #606266;
            width: 140px;
            font-weight: 500;
        }

        .center {
            text-align: center;
        }

        tr:hover td:not(.label-cell) {
            background-color: #FAFAFA;
        }
    }

    .revision-section {
        .revision-table {
            width: 100%;
            th {
                text-align: center;
                padding: 12px 16px;
            }

            td {
                text-align: center;
                // vertical-align: top;
                // min-width: 300px;

                .el-textarea {
                    width: 100%;
                }
            }
        }
    }

    :deep(.el-input__inner) {
        border: 1px solid transparent;
        background-color: transparent;
        transition: all 0.3s;

        &:hover {
            border-color: #DCDFE6;
            background-color: #f5f7fa;
        }

        &:focus {
            border-color: #409EFF;
            background-color: #fff;
        }
    }

    :deep(.el-textarea__inner) {
        border: 1px solid transparent;
        background-color: transparent;
        resize: vertical;
        min-height: 100px;
        max-height: 500px;
        transition: all 0.3s;
        border-radius: 4px;

        &:hover {
            border-color: #DCDFE6;
            background-color: #f5f7fa;
        }

        &:focus {
            border-color: #409EFF;
            background-color: #fff;
        }
    }

    :deep(.el-form-item) {
        margin-bottom: 0;
    }

    .form-actions {
        text-align: center;
        margin-top: 48px;
        padding-top: 24px;
        border-top: 1px solid #EBEEF5;

        .el-button {
            padding: 12px 30px;
            font-size: 14px;
            transition: all 0.3s;
            margin: 0 12px;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }
        }
    }
}

:deep(.el-form-item) {
    .el-form-item__content {
        margin-left: 0px !important;
    }
}

@media screen and (max-width: 768px) {
    .xdfeizhi-form {
        padding: 16px;

        .form-container {
            padding: 20px;
        }

        .form-table {
            td, th {
                padding: 12px;
            }
        }

        .label-cell {
            width: 100px;
        }
    }
}
</style>